import React, { useState } from 'react';
import { Link, useRouter } from 'next/router';
import welcomeStyles from '../styles/welcomePage.module.css';
import stepStyle from '../styles/steps.module.css';
import axios from 'axios';
import {
  AutoComplete,
  Button,
  Cascader,
  Checkbox,
  Col,
  Form,
  Input,
  InputNumber,
  Row,
  Select,
  message,
  Steps,
} from 'antd';
const { Option } = Select;

const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};
const RegisterPage1 = () => {
  const router = useRouter();
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    axios.post('/api/user/register', values)
    .then((response) => {
      console.log('Success:', response.data);
      localStorage.setItem('username', values.username);
      message.success('注册成功');
      // 使用router.push来导航到/main页面
      router.push('/register2'); 
    })
    .catch((error) => {
      console.log('Error:', error);
      // 登录失败时的处理
      if (error.response) {
        // 服务器返回了错误响应
        const errorMessage = error.response.data.msg || '注册失败';
        message.error(errorMessage);
      } else if (error.request) {
        // 请求已发出，但没有收到响应
        message.error('请求失败，请检查网络连接');
      } else {
        // 发送请求时出了问题
        message.error('请求失败，请检查后端服务是否可用');
      }
    });
};
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
  
  const [autoCompleteResult, setAutoCompleteResult] = useState([]);
  
  return (
    <div className={welcomeStyles.backgroundContainer}>   {/* 注册页面背景 */}
    <div className={stepStyle.customStepsContainer}>
    <Steps 
    current={0}
    items={[
      {
        title: '注册信息',
      },
      {
        title: '填写问卷',
      },
      {
        title: '完成',
      },
    ]}
  />
  </div>
  <br/>
  <br/>
    <Form
      {...formItemLayout}
      form={form}
      name="register"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      style={{
        maxWidth: 600,
      }}
      scrollToFirstError
    >
      <Form.Item
        name="username"
        label="Username"
        rules={[
          {
            type: 'string',
            message: 'The input is not valid username!',
          },
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      
      <Form.Item
        name="password"
        label="Password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
        hasFeedback
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="repassword"
        label="Confirm Password"
        dependencies={['password']}
        hasFeedback
        rules={[
          {
            required: true,
            message: 'Please confirm your password!',
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('The new password that you entered do not match!'));
            },
          }),
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="email"
        label="E-mail"
        rules={[
          {
            type: 'email',
            message: 'The input is not valid E-mail!',
          },
          {
            required: true,
            message: 'Please input your E-mail!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="sex"
        label="Gender"
        rules={[
          {
            required: true,
            message: 'Please select gender!',
          },
        ]}
      >
        <Select placeholder="select your gender">
          <Option value="male">Male</Option>
          <Option value="female">Female</Option>
          <Option value="other">Other</Option>
        </Select>
      </Form.Item>

      <Form.Item
        name="agreement"
        valuePropName="checked"
        rules={[
          {
            validator: (_, value) =>
              value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
          },
        ]}
        {...tailFormItemLayout}
      >
        <Checkbox>
          I have read the <a href="">agreement</a>
        </Checkbox>
      </Form.Item>
      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          Register
        </Button>
      </Form.Item>
    </Form>
    </div>
   
  );
};
export default RegisterPage1;